<template>
	<div class="warn" :style="{ height: `calc(100vh - ${setMainHeight}` }">
		<el-card class="box-card" :style="{ height: `calc(100vh - ${setMainHeight}` }" style="overflow: auto">
			<div slot="header" class="clearfix">
				<!-- <span>告警管理</span>
				<el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
				<div class="label">
					<span class="title">告警任务</span>
					<el-select size="small" v-model="reqData.task" placeholder="请选择" clearable>
						<el-option label="任务1" value="1"> </el-option>
						<el-option label="任务2" value="2"> </el-option>
						<el-option label="任务3" value="3"> </el-option>
					</el-select>
				</div>
				<div class="label">
					<span class="title">视频通道</span>
					<el-select size="small" v-model="reqData.channel" placeholder="请选择" clearable>
						<el-option label="通道1" value="1"> </el-option>
						<el-option label="通道2" value="2"> </el-option>
						<el-option label="通道3" value="3"> </el-option>
					</el-select>
				</div>

				<div class="label">
					<span class="title">告警日期</span>
					<el-date-picker
						size="small"
						format="yyyy-MM-dd HH:mm:ss"
						v-model="reqData.range"
						type="daterange"
						range-separator="至"
						start-placeholder="开始日期"
						end-placeholder="结束日期"
					>
					</el-date-picker>
				</div>
				<div class="label">
					<span class="title">告警内容</span>
					<el-select size="small" v-model="reqData.content" placeholder="请选择" clearable>
						<el-option label="内容1" value="1"> </el-option>
						<el-option label="内容2" value="2"> </el-option>
						<el-option label="内容3" value="3"> </el-option>
					</el-select>
				</div>
				<el-button type="primary" size="small">搜索</el-button>
			</div>

			<div class="innerbox" v-for="item in alarmList" :key="item.id">
				<div class="title">{{ item.title }} <span style="color: #6684a6; float: right; cursor: pointer">详情</span></div>

				<div class="pic">
					<img :src="item.src" alt="" />
				</div>

				<div class="info">视频通道：{{ item.channel }}</div>
				<div class="info">告警日期：{{ item.date }}</div>
				<div class="info">上报地址：{{ item.address }}</div>

				<div class="info">上报状态：{{ item.status }}</div>
				<div class="info">告警内容：{{ item.content }}</div>
			</div>
		</el-card>
	</div>
</template>

<script>
export default {
	name: 'warn',
	data() {
		return {
			alarmList: [
				{
					id: 1,
					title: '告警任务001',
					src: require('@/assets/img/test.png'),
					channel: '002',
					date: '2024-06-05 10:05:59',
					address: '地址1',
					status: '上传失败',
					content: '未安全监测',
				},
				{
					id: 2,
					title: '告警任务001',
					src: require('@/assets/img/test.png'),
					channel: '002',
					date: '2024-06-05 10:05:59',
					address: '地址1',
					status: '上传失败',
					content: '未安全监测',
				},
				{
					id: 3,
					title: '告警任务001',
					src: require('@/assets/img/test.png'),
					channel: '002',
					date: '2024-06-05 10:05:59',
					address: '地址1',
					status: '上传失败',
					content: '未安全监测',
				},
				{
					id: 4,
					title: '告警任务001',
					src: require('@/assets/img/test.png'),
					channel: '002',
					date: '2024-06-05 10:05:59',
					address: '地址1',
					status: '上传失败',
					content: '未安全监测',
				},
				{
					id: 5,
					title: '告警任务001',
					src: require('@/assets/img/test.png'),
					channel: '002',
					date: '2024-06-05 10:05:59',
					address: '地址1',
					status: '上传失败',
					content: '未安全监测',
				},
				{
					id: 6,
					title: '告警任务001',
					src: require('@/assets/img/test.png'),
					channel: '002',
					date: '2024-06-05 10:05:59',
					address: '地址1',
					status: '上传失败',
					content: '未安全监测',
				},
				{
					id: 7,
					title: '告警任务001',
					src: require('@/assets/img/test.png'),
					channel: '002',
					date: '2024-06-05 10:05:59',
					address: '地址1',
					status: '上传失败',
					content: '未安全监测',
				},
				{
					id: 8,
					title: '告警任务001',
					src: require('@/assets/img/test.png'),
					channel: '002',
					date: '2024-06-05 10:05:59',
					address: '地址1',
					status: '上传失败',
					content: '未安全监测',
				},
			],
			reqData: {
				task: '',
				channel: '',
				content: '',
				range: null,
			},
		};
	},
	computed: {
		// 设置主盒子高度
		setMainHeight() {
			let { isTagsview } = this.$store.state.themeConfig.themeConfig;
			if (isTagsview) return `114px`;
			else return `80px`;
		},
	},
};
</script>

<style scoped lang="scss">
.warn {
	::v-deep .clearfix {
		display: flex;

		.label {
			margin-right: 10px;
			.title {
				width: 62px;
				text-align: left;
				display: inline-block;
			}
		}

		.el-date-editor .el-range-separator {
			width: 6%;
		}
	}

	::v-deep .el-card__body {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		padding: 20px 30px;
		justify-content: space-between;

		.innerbox {
			width: 24%;
			height: 340px;
			border: 1px solid #ccc;
			box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
			margin-bottom: 10px;

			display: flex;
			flex-direction: column;
			.title {
				height: 32px;
				line-height: 32px;
				padding: 0 10px;
			}

			.pic {
				width: 100%;
				height: 180px;

				img {
					width: 100%;
					height: 100%;
				}
			}

			.info {
				text-align: left;
				padding-left: 10px;
				height: 24px;
				line-height: 24px;
			}
		}
	}
}
</style>
